import { h, render } from 'vue'
import XtxMessage from './message.vue'
type Params = {
  type: 'success' | 'error' | 'warning'
  text: string,
  duration?: number
}
const divContainer = document.createElement('div')
divContainer.setAttribute('class', 'xtx-message-container')
document.body.appendChild(divContainer)

let timer: number = -1
function Message({ type, text, duration = 2000 }: Params) {
  // 1.创建虚拟dom
  const vNode = h(XtxMessage, { type, text })
  // 2.动态渲染render
  render(vNode, divContainer)
  // 3.开一个延时器，到时间隐藏
  clearTimeout(timer)
  timer = window.setTimeout(() => {
    // 删除虚拟dom
    render(null, divContainer)
  }, duration)
}

Message.success = function (text: string, duration = 2000) {
  Message({
    type: 'success',
    text,
    duration
  })
}
Message.error = function (text: string, duration = 2000) {
  Message({
    type: 'error',
    text,
    duration
  })
}
Message.warning = function (text: string, duration = 2000) {
  Message({
    type: 'warning',
    text,
    duration
  })
}
export default Message